"use client"

import Link from "next/link"
import { Menu, PanelLeftClose, PanelLeftOpen } from "lucide-react"

import { Button } from "@/components/ui/button"
import { ThemeToggle } from "@/components/theme-toggle"

const navLinks = [
  { href: "#home", label: "首页" },
  { href: "#news", label: "资讯" },
  { href: "#free", label: "免费AI" },
  { href: "#flash", label: "AI快讯" },
  { href: "#certification", label: "AI证书" },
  { href: "#side-business", label: "AI副业" },
  { href: "#reports", label: "报告" },
]

type NavbarProps = {
  onToggleMobileSidebar?: () => void
  isMobileSidebarOpen?: boolean
  onToggleCollapse?: () => void
  isSidebarExpanded?: boolean
}

export function Navbar({
  onToggleMobileSidebar,
  isMobileSidebarOpen = false,
  onToggleCollapse,
  isSidebarExpanded = true,
}: NavbarProps) {
  const mobileLabel = isMobileSidebarOpen ? "收起分类导航" : "展开分类导航"
  const desktopLabel = isSidebarExpanded ? "收起分类导航" : "展开分类导航"

  return (
    <nav className="fixed inset-x-0 top-0 z-50 border-b border-border/40 bg-background/80 backdrop-blur-md supports-[backdrop-filter]:bg-background/70">
      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-16">
        <div className="flex items-center gap-2">
          {onToggleMobileSidebar && (
            <Button
              variant="ghost"
              size="icon"
              className="text-muted-foreground hover:text-primary lg:hidden"
              onClick={onToggleMobileSidebar}
              aria-label={mobileLabel}
            >
              {isMobileSidebarOpen ? <PanelLeftClose className="size-4" /> : <Menu className="size-4" />}
            </Button>
          )}

          {onToggleCollapse && (
            <Button
              variant="ghost"
              size="icon"
              className="hidden text-muted-foreground hover:text-primary lg:flex"
              onClick={onToggleCollapse}
              aria-label={desktopLabel}
            >
              {isSidebarExpanded ? <PanelLeftClose className="size-4" /> : <PanelLeftOpen className="size-4" />}
            </Button>
          )}

          <Link
            href="#home"
            className="flex items-center gap-2 text-lg font-semibold tracking-tight text-primary sm:text-xl"
          >
            <span className="rounded-full bg-primary px-2.5 py-1 text-xs font-semibold uppercase text-primary-foreground">
              AIGC
            </span>
            工具导航
          </Link>
        </div>

        <div className="hidden items-center gap-6 md:flex">
          {navLinks.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className="text-sm font-medium text-foreground/70 transition-colors hover:text-primary"
            >
              {link.label}
            </Link>
          ))}
        </div>

        <div className="flex items-center gap-2">
          <ThemeToggle />
          <Button
            variant="ghost"
            className="hidden text-sm font-medium text-foreground/70 hover:text-primary lg:flex"
            asChild
          >
            <Link href="#subscribe">订阅资讯</Link>
          </Button>
          <Button size="sm" className="text-sm font-semibold" asChild>
            <Link href="#submit-tool">提交工具</Link>
          </Button>
        </div>
      </div>
    </nav>
  )
}
